<template>
  <view class="login_box">
    <view class="header">
      <view class="title">软星租房</view>
      <image
        class="cover"
        src="https://www.lyzhnb.top/rxls-community/user.svg"
        mode="aspectFill"
      />
      <view
        class="sub_title"
        v-for="(item, index) in sloganList"
        :key="index"
        :style="{'--timer':(index/sloganList.length+0.2)+'s'}"
        >{{ item }}</view
      >
    </view>

    <view class="submit" @click="login">一键登录/注册</view>

    <view class="agreement">
      <uni-icons
        class="icon"
        :type="isYes ? 'checkbox-filled' : 'circle'"
        :color="isYes ? 'rgb(246, 120, 36)' : 'rgb(70, 63, 63)'"
        size="22"
        @click="isYes = !isYes"
      />
      <view class="text">我已阅读并同意</view>
      <view class="url" @click="toAgreement">《服务条款》</view>
      <view>和</view>
      <view class="url" @click="toPrivacy">《隐私协议》</view>
    </view>
  </view>
</template>

<!-- 登录页面 -->
<script lang="ts" setup>
import { ACCESS_TOKENS } from '@/config/constant'
import { useUserStore } from '@/store/user'
import { ReqLogin } from '@/api/user'
import { ref } from 'vue'

//登录
const login = () => {
  if (!isYes.value) {
    uni.showToast({
      title: '请先勾选并同意协议',
      icon: 'none',
      mask: true,
    })
    return
  }
  uni.login({
    success: (result) => {
      ReqLogin({ code: result.code }).then((res) => {
        if (res.code == 200 && res.data) {
          useUserStore().initInfo(res.data.user, res.data.houses)
          uni.setStorageSync(ACCESS_TOKENS, res.data.token)
          uni.showToast({
            title: '登录成功',
            icon: 'none',
            mask: true,
          })
          setTimeout(() => {
            uni.switchTab({ url: '/pages/my/my' })
          }, 300)
        }
      })
    },
    fail: (error) => {
      console.error('login error ', error)
      uni.showToast({
        title: '授权失败',
        icon: 'none',
        mask: true,
      })
    },
  })
}

//标语
const sloganList = ref([
  '欢迎・使用',
  '理想居住空间',
  '万千选择',
  '家的轮廓渐清晰',
  '美好生活',
  '此刻点亮',
])

//是否同意隐私协议
const isYes = ref(false)

//跳转
const toAgreement = () => {
  uni.navigateTo({ url: `/subpkg/agreement/agreement` })
}

//跳转
const toPrivacy = () => {
  uni.navigateTo({ url: `/subpkg/privacy/privacy` })
}
</script>

<style scoped lang="scss">
.login_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 150rpx;
  height: calc(100vh - 150rpx);

  .submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 90rpx;
    border-radius: 90rpx;
    color: rgb(255, 255, 255);
    background-color: rgb(246, 120, 36);
    margin-top: auto;
  }

  .agreement {
    font-size: 28rpx;
    display: flex;
    align-items: center;
    color: rgb(70, 63, 63);
    padding-top: 50rpx;

    .text {
      padding-left: 10rpx;
    }

    .icon {
      transform: translateY(2rpx);
    }

    .url {
      color: rgb(248, 133, 40);
    }
  }

  .header {
    letter-spacing: 2rpx;
    margin-top: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .title {
      font-size: 40rpx;
      font-weight: 700;
      color: rgb(255, 174, 0);
    }

    .sub_title {
      font-size: 28rpx;
      animation: move_title 1s ease-in-out forwards;
      padding: 10rpx 0;
      animation-delay: var(--timer);
      opacity: 0;
    }

    .cover {
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
      margin: 50rpx 0;
    }
  }
}

@keyframes move_title {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
